<template>
    <div class="login-contain">
        <div class="login-box">
            <img src="./logo_index.png" alt="">
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
                <el-form-item  prop="mobile">
                    <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
                      <i slot="prefix" class="iconfont icon-shouji"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="loginForm.code" placeholder="请输入验证码">
                        <i slot="prefix" class="iconfont icon-code"></i>
                    </el-input>

                </el-form-item>
                <el-form-item prop="xieyi">
                    <el-checkbox v-model="loginForm.xieyi"></el-checkbox>
                    <span>我已阅读并同意用户协议和隐私条款</span>
                </el-form-item>
                <el-form-item>
                  <!-- :loading="load" -->
                    <el-button type="primary" :loading="btnLoading"  style="width:100%;" @click="login()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
import '@/assets/font/iconfont.css'
import '@/assets/js/gt.js'
export default {

  data () {
    var checkMobile = (rule, value, callback) => {
      //  value:被校验的数据
      // callback:回调函数,无论校验是否成功,该函数都需要被校验
      var reg = /^1[23456789]\d{9}$/
      if (!reg.test(value)) {
        return callback(new Error('手机号码不正确:11位数字中国号码'))
      }
      callback()
    }
    var checkXieyi = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请勾选协议'))
      }
      callback()
    }
    return {
      catpchaObject: null,
      btnLoading: false,
      loginForm: {
        mobile: '13844145535', // 13911111111 13844145535
        code: '246810',
        xieyi: false

      },
      rules: {
        mobile: [
          // 第一个校验
          { required: true, message: '手机号码必填', trigger: 'blur' },
          // 第二个校验
          { validator: checkMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码必填', trigger: 'blur' }
        ],
        xieyi: [
          { validator: checkXieyi, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    loginAct () {
      var pro = this.$http.post('/authorizations', this.loginForm)
      pro.then((result) => {
        // console.log(result)
        // console.log(result.data.data)
        var { name, token, photo } = result.data.data

        window.sessionStorage.setItem('token', token)
        // window.sessionStorage.setItem('name', name)
        // window.sessionStorage.setItem('photo', photo)
        // console.log(this) this 中有store -->commitfangfa
        // this.$store.commit(mutations方法,参数)
        this.$store.commit('upName', name)
        this.$store.commit('upPhoto', photo)

        // 变成导航路由
        this.$router.push({ name: 'home' })
      }).catch((err) => {
        console.log('错误', err)
        return this.$message.error('用户名或密码错误')
      })
    },
    login () {
      // 对当前的el-form表单进行验证
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          // 判断之前有生成过窗口,就直接打开
          if (this.captchaObj) {
            return this.catpchaObject.verify()
          }

          // 等待加载
          this.btnLoading = true
          // 人机交互
          // 1) 获得验证的秘钥信息
          let pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
          pro
            .then((result) => {
              // console.log(result)
              // 从result中把相关的信息解构出来
              let { data } = result.data

              // 显示人机窗口
              // 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
              window.initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                product: 'bind' // 隐藏"人机按钮"
              }, captchaObj => {
                // 这里可以调用验证实例 captchaObj 的实例方法
                captchaObj.onReady(() => {
                  // 验证码ready之后才能调用verify方法“显示验证码”
                  captchaObj.verify() // 显示验证码
                  this.btnLoading = false
                  // 把生成好的窗口对象赋值给captchaObject
                  this.catpchaObject = captchaObj
                }).onSuccess(() => {
                  // 人机验证成功
                  // 验证账号登录系统
                  this.loginAct()
                }).onError(() => {
                  // 人机验证失败
                })
              })
            })
            .catch((err) => {
              console.log(err)
              return this.$message.error('获得人机验证码失败！')
            })
        }
      })
    }

  }

}
</script>

<style lang="less" scoped>
    .login-contain {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(./login_bg.jpg) ;
        background-size: cover;

    }
    .login-box {
        width: 400px;
        height: 300px;
        padding: 40px 80px;
        background-color: #fff;
        img {
            display: block;
            margin: 0px auto 10px;
        }
        .el-form-item {
            width: 100%;
        }

    }
</style>
